.input {
    border: 1px solid red;
}

.show {
    opacity: 1;
    animation: showitem 1s forwards;
}

.hide {
    opacity: 0;
    /*transition: all .3s ease-in;*/
    animation: hideitem 1s ease-in forwards;
}

@keyframes hideitem {
    0% {
        opacity: 1;
        color: red
    }
    50% {
        opacity: .5;
        color: green
    }
    100% {
        opacity: 0;
        color: blue
    }
}
@keyframes showitem {
    100% {
        opacity: 1;
        color: red
    }
    50% {
        opacity: .5;
        color: green
    }
    0% {
        opacity: 0;
        color: blue
    }

}
.fade-enter, .fade-appear{
    opacity: 0;
}
.fade-enter-active, .fade-appear-active{
    opacity: 1;
    transition:opacity 1s ease-in;
}
.fade-enter-done{
    opacity: 1;
}
.fade-exit{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0;
    transition:opacity 1s ease;
}
.fade-exit-done{
    opacity: 0;
}
